<template>
    <div class="index">
      <div class="lunbotu">
        <swiper     
          :observer="true"
          :observeParents="true"
          :loop="true"
          :modules="modules"
          :slides-per-view="1"   
          :autoplay="{delay:2500,disableOnInteraction:true}"
          @swiper="onSwiper"
          @slideChange="onSlideChange"
        >
        
          <!-- :loop="true"  可循环轮播
          :slides-per-view="1"   控制一次可显示几张轮播图
          :space-between="50"   控制每张轮播图之间的距离，与margin不能共存
          :autoplay="{delay:4000,disableOnInteraction:false}"  控制自动轮播的的时间和事件等
          navigation  左右箭头
          :pagination="{ clickable: true }" 轮播图底部小圆点
          :scrollbar="{ draggable: true }"  轮播图滚动条
          @swiper="onSwiper"
          @slideChange="onSlideChange" -->
       
          <swiper-slide v-for="item in list" :key="item.id">
            <a :href="item.imsrc" target="_blank">
            <!-- <div @click="this.$router.push(item.imsrc)" target="_blank"> -->
              <img :src="item.image" alt="" >
            <!-- </div> -->
            </a>
          </swiper-slide>
        </swiper>
      </div>

      <div class="yifu liebiao">
        <div class="biaoti">
          <div class="zuoce">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-yifu"></use>
            </svg>
            上衣
          </div>
          <div class="youce" @click="this.$router.push('/mulu/clothing_more')">
            更多
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-arrow-circle-right"></use>
            </svg>
          </div>
        </div>
        <div class="lbt"><img :src="ima1" alt=""></div>
        <div class="content">
          <!-- slice截取数组的长度来控制for循环的次数，或用v-if和index来控制 -->
          <div class="items-box-fake" v-for="item in data1.slice(0,1)"  :key='item.id'>
            <kapian :arr="item" maxLength="4" :zid="atitle"></kapian>     
          </div>
        </div>
      </div>
      <div class="quzhi liebiao">
        <div class="biaoti">
          <div class="zuoce">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-yifu1"></use>
            </svg>
            裙子
          </div>
          <div class="youce" @click="this.$router.push('/mulu/skirt_more')">
            更多
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-arrow-circle-right"></use>
            </svg>
          </div>
        </div>
        <div class="lbt"><img :src="ima2" alt=""></div>
        <div class="content">
          <div class="items-box-fake" v-for='items in data2.slice(0,1)'  :key='items.id'>
            <kapian :arr="items" maxLength="4" :zid="btitle"></kapian>     
          </div>
        </div>
      </div>
      <div class="kuzhi liebiao">
        <div class="biaoti">
          <div class="zuoce">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-kuzi"></use>
            </svg>
            裤子
          </div>
          <div class="youce" @click="this.$router.push('/mulu/trousers_more')">
            更多
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-arrow-circle-right"></use>
            </svg>
          </div>
        </div>
        <div class="lbt"><img :src="ima3" alt=""></div>
        <div class="content">
          <div class="items-box-fake" v-for='items in data3.slice(0,1)'  :key='items.id'>
            <kapian :arr="items" maxLength="4" :zid="ctitle"></kapian>     
          </div>
        </div>
      </div>
      <div class="xiezhi liebiao">
        <div class="biaoti">
          <div class="zuoce">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-Boots"></use>
            </svg>
            鞋子
          </div>
          <div class="youce"  @click="this.$router.push('/mulu/shoes_more')">
            更多
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-arrow-circle-right"></use>
            </svg>
          </div>
        </div>
        <div class="lbt"><img :src="ima4" alt=""></div>
        <div class="content">
          <div class="items-box-fake" v-for='items in data4.slice(0,1)'  :key='items.id'>
            <kapian :arr="items" maxLength="4" :zid="dtitle"></kapian>     
          </div>
        </div>
      </div>
      <div class="baobao liebiao">
        <div class="biaoti">
          <div class="zuoce">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-baobao"></use>
            </svg>
            包包
          </div>
          <div class="youce" @click="this.$router.push('/mulu/bags_more')">
            更多
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-arrow-circle-right"></use>
            </svg>
          </div>
        </div>
        <div class="lbt"><img :src="ima5" alt=""></div>
        <div class="content">
          <div class="items-box-fake" v-for='items in data5.slice(0,1)'  :key='items.id'>
            <kapian :arr="items" maxLength="4" :zid="etitle"></kapian>     
          </div>
        </div>
      </div>
      <div class="jiaju liebiao">
        <div class="biaoti">
          <div class="zuoce">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-jiaju"></use>
            </svg>
            家居
          </div>
          <div class="youce" @click="this.$router.push('/mulu/home_more')">
            更多
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-arrow-circle-right"></use>
            </svg>
          </div>
        </div>
        <div class="lbt"><img :src="ima6" alt=""></div>
        <div class="content">
          <div class="items-box-fake" v-for='items in data6.slice(0,1)'  :key='items.id'>
            <kapian :arr="items" maxLength="4" :zid="ftitle"></kapian>     
          </div>
        </div>
      </div> 
    </div>
</template>
  
<script>
import kapian from "@/components/kapian"
import {categoryData} from '@/request/api';
import {lunbt,tupian} from '@/request/api';
// 引入swiper核心和所需模块，左右箭头、底部小圆点、底部进度条、自动轮播
import { Navigation, Pagination, Scrollbar, A11y,Autoplay} from 'swiper';
// // 引入swiper组件
import { Swiper, SwiperSlide } from 'swiper/vue';
// // 引入swiper样式
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'index',
    // 引入组件
    components: {
      Swiper,
      SwiperSlide,
      kapian
    },
    // 引入所需模块和核心
    setup() {
      const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };
      return {
        onSwiper,
        onSlideChange,
        modules: [Navigation, Pagination, Scrollbar, A11y,Autoplay],
      };
    },
    data () {
      return { 
        list:[],
        lista:[],
        ima1:"",
        ima2:"",
        ima3:"",
        ima4:"",
        ima5:"",
        ima6:"",
        data1:[],
        atitle:'clothing_more',
        data2:[],
        btitle:'skirt_more',
        data3:[],
        ctitle:'trousers_more',
        data4:[],
        dtitle:'shoes_more',
        data5:[],
        etitle:'bags_more',
        data6:[],
        ftitle:'home_more'
      }
    },
    // 数据请求回来后再出dom节点
    async created() {
      let res = await lunbt();
      this.list = res.data;
    
      let resa = await tupian();
      console.log(resa);
      this.lista = resa.data;
      this.ima1 = this.lista[0].ima;
      this.ima2 = this.lista[1].ima;
      this.ima3 = this.lista[2].ima;
      this.ima4 = this.lista[3].ima;
      this.ima5 = this.lista[4].ima;
      this.ima6 = this.lista[5].ima;
      console.log(this.lista);
      console.log(this.lista[0].ima);
      
      this.data1 = this.categoryGetDataa( this.atitle, 0 );
      this.data2 = this.categoryGetDatab( this.btitle, 0 );
      this.data3 = this.categoryGetDatac( this.ctitle, 0 );
      this.data4 = this.categoryGetDatad( this.dtitle, 0 );
      this.data5 = this.categoryGetDatae( this.etitle, 0 );
      this.data6 = this.categoryGetDataf(this.ftitle, 0);

    // let res2 = await ReMenAPI();
    // this.remenArr = res2.data.data.records;
    },
    // dom节点加载后请求数据
    mounted() {
      
    },
    methods: {
      categoryGetDataa(title,page) {
        categoryData(title,page).then(res => {
          this.data1.push(res['hits']['hits']['0']['_source']['wall']['docs']) 
        });
        return this.data1 
      },
      categoryGetDatab(title,page) {
        categoryData(title,page).then(res => {
          this.data2.push(res['hits']['hits']['0']['_source']['wall']['docs']) 
        });
        return this.data2
      },
      categoryGetDatac(title,page) {
        categoryData(title,page).then(res => {
          this.data3.push(res['hits']['hits']['0']['_source']['wall']['docs']) 
        });
        return this.data3
      },
      categoryGetDatad(title,page) {
        categoryData(title,page).then(res => {
          this.data4.push(res['hits']['hits']['0']['_source']['wall']['docs']) 
        });
        return this.data4
      },
      categoryGetDatae(title,page) {
        categoryData(title,page).then(res => {
          this.data5.push(res['hits']['hits']['0']['_source']['wall']['docs']) 
        });
        return this.data5
      },
      categoryGetDataf(title,page) {
        categoryData(title,page).then(res => {
          this.data6.push(res['hits']['hits']['0']['_source']['wall']['docs']) 
        });
        return this.data6
      }
    }
}
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.index{
  position: relative;
  top:70px;
  // -1会影响点击事件
  z-index: 1;
  .lunbotu{
    :deep(.swiper){
      .swiper-slide{
        background-color: blue;
        height:600px;
        img{
          width:100%;
          height:100%;
        }
      }
    }
  }
}
// 对轮播图样式进行更改
.liebiao{
  margin-top: 50px;
  .biaoti{
    width: 1200px;
    height: 50px;
    margin: 0 auto;
    margin-bottom:15px;
    .zuoce{
      float: left;
      font-size: 40px;
      line-height: 50px;
      .icon{
        height: 40px;
        width: 40px;
      }
    }
    .youce{
      float: right;
      font-size:20px;
      line-height: 50px;
      .icon{
        height: 24px;
        width: 24px;
      }
    }
  }
  .lbt{
    width: 1200px;
    height: 300px;
    // background-color: pink;
    margin: 0 auto;
    border-radius:15px;
    img{
      width: 1200px;
      height: 300px;
    }
  }
}
.content{
  padding-bottom: 20px;
  text-align: center; 
  margin: 0 auto;
  width: 90.03%;
  margin-top: 50px;
}
// 后代选择器
.content{
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 30px;
}

.items-box-fake{
  width: 1200px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
  margin-top: 30px;
}
  


</style>
  